<template>
	<view class="payee_info">
		<form @submit="formSubmit" @reset="formReset">
			<view class="view">
				<view class="uni-form-item uni-column">
					<view class="title flex">
						<label>银行卡号：</label>
						<input type="text" placeholder="XXXX-XXXXXXXXXX" v-model="form.bankAccount" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title flex">
						<label>收款人姓名：</label>
						<input type="text" placeholder="张三" v-model="form.accountRealname" />
					</view>
				</view>

				<view class="uni-form-item uni-column">
					<view class="title flex">
						<label>地区：</label>
						<input type="text" disabled v-model="form.localtion" @click="ClickLocation()" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title flex">
						<label>所属银行：</label>
						<input type="text" placeholder="中国人民银行" v-model="form.subbranch" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title flex">
						<label>开户行：</label>
						<input type="text" placeholder="中国人民银行支行" v-model="form.bankName" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title flex">
						<label>手机号：</label>
						<input type="text" placeholder="136XXXXXXXX" v-model="form.bankPhone" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title flex">
						<label>身份证号：</label>
						<input type="text" v-model="form.mySelf" />
					</view>
				</view>
			</view>
			<u-popup :show="show" @close="close()">
				<view class="info">
					<scroll-view class="scroll" scroll-y="true">
						<view v-for="item in columns" @click="clickCname(item)" class="scroll_view">
							{{item.cname}}
						</view>
					</scroll-view>
				</view>
			</u-popup>
			<view class="uni-btn-v">
				<button type="primary" form-type="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				form: {
					bankName: "",
					accountRealname: "",
					bankAccount: "",
					bankPhone: "",
					subbranch: '',
					localtion: ''
				},
				GitList: {
					realName: '',
					phone: '',
					provinceCityDistrict: '',
					detail: '',
					// postCode:'',
					isDefault: 0
				},
				visible: false,
				show: false,
				columns: [],
			}
		},
		methods: {
			formSubmit() {
				let regExp = new RegExp("^[1][3|4|5|6|7|8|9][0-9]{9}$")
				if (!this.form.bankName) {
					uni.showToast({
						title: '请输入开户行',
						icon: 'error'
					})
				} else if (!this.form.accountRealname) {
					uni.showToast({
						title: '请输入收款人姓名',
						icon: 'error'
					})
				} else if (!this.form.localtion) {
					uni.showToast({
						title: '请选择地区',
						icon: 'error'
					})
				} else if (!this.form.subbranch) {
					uni.showToast({
						title: '请输入所属银行',
						icon: 'error'
					})
				} else if (!this.form.bankAccount) {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'error'
					})
				} else if (!this.form.bankPhone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'error'
					})
				} else if (!regExp.test(this.form.bankPhone)) {
					uni.showToast({
						title: '手机号码格式错误',
						icon: 'error'
					})
				} else if (!this.form.mySelf) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'error'
					})
				} else {
					this.$http({
						url: '/memberBank/setMemberBank',
						data: {
							...this.form
						},
						method: 'POST'
					}).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error'
							})
						}
					})
				}

			},
			formReset() {

			},
			change(e) {
				if (e === true) {
					this.GitList.isDefault = 1
				} else {
					this.GitList.isDefault = 0
				}
			},
			clickCname(item) {
				this.form.localtion += item.cname
				this.SearchLocation(item.id)
			},
			ClickLocation() {
				this.show = true
				this.form.localtion = ''
				this.SearchLocation(1)
			},
			SearchLocation(id) {
				this.$http({
					url: '/area/selectArea',
					method: 'GET',
					data: {
						parentId: id,
					}
				}).then(res => {
					this.columns = res.data.data
					if (this.columns.length == 0) {
						this.show = false
						this.index = 0
					} else {
						this.index++
					}
				})
			},
			close() {
				this.show = false
			},
		},
		onLoad() {
			this.SearchLocation(1)
			// 查询账户银行信息
			this.$http({
				url: '/memberBank/getMemberBank',
				method: 'GET'
			}).then(res => {
				console.log(res);
				if (res.data.code === 200 && res.data.data) {
					this.form = res.data.data
				} else if (res.data.code === 450) {
					uni.showToast({
						title: res.data.message,
						icon: 'error'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/Applogin/Applogin'
						})
					}, 1000)
				}
			})

		}
	}
</script>

<style lang="scss" scoped>
	@import './payeeInfo.css'
</style>
